<template>
  <div class="merchant-details">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="库存明细-详情" size="70%" class="box-drawer"
      :with-header="false" :visible.sync="drawerLoading" :show-close="true" @close="cloneDrawer">
      <!--      头部-->
      <div style="position: relative">
        <div class="drawerTitle">
          <span>库存明细-详情</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <!--列表 -->
      <div class="container-module">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item class="search-form-item" label="规格ID" style="margin: 5px 0">
                <el-input clearable placeholder="请输入规格ID" v-model="searchForm.mgpsl_id" class="input-with-select">
                </el-input>
              </el-form-item>
              <el-form-item class="search-form-item" label="变化原因" style="margin: 5px 0">
                <el-select clearable v-model="searchForm.from_type" placeholder="请选择变化原因">
                  <el-option v-for="item in [
                        { name: '采购', id: 1 },
                        { name: '采购退货', id: 2 },
                        { name: '自提售后-换货', id: 9 },
                        { name: '选品补货', id: 7 },
                        { name: '选品减货', id: 12 },
                      ]" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getinventorylist">查询</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="left-panel">
                <el-button type="text"></el-button>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="right-panel el-button-group">
                <el-button class="" icon="el-icon-refresh" size="mini" @click="refresh"></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                      <el-checkbox v-model="checkboxTableThead"
                        :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table v-loading="loading" highlight-current-row :data="inventorylist" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="100%">
              <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label" :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                " align="center">
                <template slot-scope="scope">
                  <div v-if="fruit == 'from_type'">
                    <span v-if="scope.row.from_type == 0">全部</span>
                    <span v-if="scope.row.from_type == 1">采购</span>
                    <span v-if="scope.row.from_type == 2">采购退货</span>
                    <span v-if="scope.row.from_type == 3">采购自提</span>
                    <span v-if="scope.row.from_type == 4">采购自提退回</span>
                    <span v-if="scope.row.from_type == 5">商品上架</span>
                    <span v-if="scope.row.from_type == 6">商品下架</span>
                    <span v-if="scope.row.from_type == 9">自提售后-换货</span>
                    <span v-if="scope.row.from_type == 7">选品补货</span>
                    <span v-if="scope.row.from_type == 8">采购退货取消</span>
                    <span v-if="scope.row.from_type == 10">商品补货</span>
                    <span v-if="scope.row.from_type == 11">采购售后拒绝-库存退回</span>
                    <span v-if="scope.row.from_type == 12">选品减货</span>

                  </div>
                  <div v-else-if="fruit == 'num'">
                    <span v-if="scope.row.change_type == 1" style="color: #f86d60;">+{{scope.row.num}}</span>
                    <span v-if="scope.row.change_type == 2" style="color: #0076f6;">-{{scope.row.num}}</span>
                  </div>

                  <div v-else-if="fruit == 'change_type'">
                    <span v-if="scope.row.change_type == 1" style="color: #f86d60;">增加</span>
                    <span v-if="scope.row.change_type == 2" style="color: #0076f6;">减少</span>
                  </div>
                  <div v-else>
                    <el-tooltip placement="top" :content="
                        scope.row[fruit] ? scope.row[fruit].toString() : '-'
                      ">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table></el-col>
          <el-col>
            <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
              @pagination="getinventorylist" />
          </el-col>
        </el-row>
      </div>


    </el-drawer>
  </div>
</template>
<script>
  import {
    merchantinventory
  } from '@/api/merchant'
  const tableTheadOption = {
    id: {
      label: "id",
      field: "id",
    },
    mgsl_id: {
      label: "选品ID",
      field: "mgsl_id",
    },
    mgpsl_id: {
      label: "规格ID",
      field: "mgpsl_id",
    },
    from_type: {
      label: "变更类型",
      field: "type",
      width: 150,
    },
    before: {
      label: "原始库存",
      field: "start_inventory",
    },
    num: {
      label: "库存增减",
      field: "alter_num",
    },
    after: {
      label: "变更后库存",
      field: "after",
    },
    change_type: {
      label: "变化类型",
      field: "change_type",
    },
    content: {
      label: "变更备注",
      field: "content",
    },
    created_at: {
      label: "变更时间",
      field: "created_at",
    },
  };
  const allTableThead = ["id", "mgsl_id", "mgpsl_id", "from_type", "before", "num", "after", "change_type", "content",
    "created_at"
  ];
  const defaultTableThead = ["mgsl_id", "mgpsl_id", "from_type", "before", "num", "after", "content",
    "created_at"
  ];
  export default {
    name: 'saveInventory',
    components: {

    },
    data() {
      return {
        loading: false,
        searchForm: {
          page: 1,
          count: 10,
          mgpsl_id: '',
          mgsl_id: '',
          change_type: '',
          from_type: ''
        },
        total: 0,
        drawerLoading: false,
        inventorylist: [],
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
      }
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
      },
    },
    created() {},
    methods: {
      //库存列表
      getinventorylist() {
        this.loading = true
        merchantinventory(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      resetting() {
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.searchForm.mgpsl_id = ''
        this.searchForm.from_type = ''
        this.getinventorylist();
      },
      refresh() {
        this.searchForm.page = 1
        this.searchForm.count = 10
        this.getinventorylist();
      },
      //接收父组件传的值
      open(row) {
        this.drawerLoading = true
        this.searchForm.mgsl_id = row.id
        this.loading = true
        merchantinventory(this.searchForm).then((res) => {
          this.loading = false
          this.inventorylist = res.data.list
          this.total = res.data.total
        })
      },
      cloneDrawer() {
        this.drawerLoading = false
      },
    }
  }
</script>
<style lang="scss">
  .container-module {
    padding: 20px 20px 10px 30px;
  }
</style>
